<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
<!--      <a-col :span="24">-->
<!--        <a-card>-->
<!--          <div class="box-ver-hor-between">-->
<!--            <div class="primary-color">联系人管理</div>-->
<!--            <div>-->
<!--              <a-button type="primary" class="mr-20">-->
<!--                批量导入-->
<!--              </a-button>-->
<!--              <a-button type="primary"  @click="gotoAdd">-->
<!--                新增联系人-->
<!--              </a-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-card>-->
<!--      </a-col>-->
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParams.params"
              @on-search ="search"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="tableConfig.columns"
            :operate="operate"
            :param="state.param"
            :toolbar="toolbar"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script setup>
import { btnIsPowerByCode, filterEmptyByObject } from '@/tools/common'
import { message , modal} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { page, remove } from "@/api/module/contact-manage";
import {reactive, createVNode, ref, onMounted} from 'vue';
import { useRouter } from 'vue-router'
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import dictEnum from '@/const/dict'

const removeKey = "remove";
const tableRef = ref()
const router = useRouter()
const pagination = {
  pageNum: 1,
  pageSize: 10,
}
let dictLists = reactive({
  data: {}
})

/// 数据来源 [模拟]
const fetch = async (param) => {
  const response = await page(param);
  return {
    data: response.data.record,
    total: response.data.total
  };
};

const gotoAdd = () => {
  router.push('/university/contact-manage/add')
}

/// 删除配置
const removeMethod = (record) => {
  modal.confirm({
    title: '您是否确定要删除此配置?',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    cancelText: '取消',
    onOk() {
      message.loading({ content: "提交中...", key: removeKey });
      remove({"id":record.id}).then((response) => {
        if(response.success){
          message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
            tableRef.value.reload()
          })
        }else{
          message.error({content: "删除失败", key: removeKey, duration: 1})
        }
      })
    }
  });
}

/// 行操作
const operate = [
  {
    label: "详情",
    event: (record) => {
      router.push({
        path: '/university/contact-manage/detail',
        query: {
          id: record.id
        }
      })
    }
  },
  {
    label: "删除",
    event: function (record) { removeMethod(record) }
  },
];

const toolbar = [
  {
    code: '',
    label: '新增项目',
    type: 'primary',
    event: (selectedRowKeys) => {
      gotoAdd()
    }
  },
  {
    code: '',
    label: '批量导入',
    type: '',
    event: (selectedRowKeys) => {
      handleExport()
    }
  },
]

const handleExport = () => {}

const openDialog = (type) => {
  state[type] = true
}

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  recordEdit: {},
  recordInfo: {},
})

let searchParams = reactive({
  params: []
})

let tableConfig = reactive({
  columns: [
    { dataIndex: "schName", key: "schName", title: "所属大学" },
    { dataIndex: "contactsName", key: "contactsName", title: "联系人姓名" },
    { dataIndex: "contactsPosition", key: "contactsPosition", title: "职位"},
    { dataIndex: "contactsDepartment", key: "contactsDepartment", title: "所属部门" },
    { dataIndex: "contactsSex", key: "contactsSex", title: "性别" },
    {
      dataIndex: "contactsState",
      key: "contactsState",
      title: "状态",
      cellRender: (record, data) => {
        if (dictLists.data[dictEnum.CONTACT_STATUS]) {
          const item = dictLists.data[dictEnum.CONTACT_STATUS].find(
            v => v.value == data
          );
          return item ? item.label : "";
        }
      }
    },
    { dataIndex: "contactsPhone", key: "contactsPhone", title: "电话" },
    { dataIndex: "contactsEmail", key: "contactsEmail", title: "Email" },
    { dataIndex: "responsiblePerson", key: "responsiblePerson", title: "负责人" },
    { dataIndex: "createTime", key: "createTime", title: "创建时间" },
  ]
})

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.CONTACT_STATUS,
  ])
  searchParams.params = [
    { dataIndex: "contactsName", key: "contactsName", type: "input", label: "联系人姓名", placeholder: '请输入'},
    { dataIndex: "contactsPosition", key: "contactsPosition", type: "input", label: "职务", placeholder: '请输入'},
    { dataIndex: "schName", key: "schName", type: "input", label: "学校名", placeholder: '请输入'},
    { dataIndex: "contactsState", key: "contactsState",
      type: "select",
      label: "状态",
      placeholder: '请选择',
      options: dictLists.data[dictEnum.CONTACT_STATUS]
    },
    { dataIndex: "responsiblePerson", key: "responsiblePerson", type: "input", label: "负责人", placeholder: '请输入'},
  ]
})

const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value)
  }
}

const onSelectChange = selectedRowKeys => {
  state.selectedRowKeys = selectedRowKeys;
};
</script>
